<template>
  <div class="bindemail">
    <van-nav-bar
      :title="$t('update.nameTitle')"
      left-arrow
      @click-left="onClickLeft()"
    />
    <div class="bindemail-body">
      <van-form ref="fromRef">
        <van-cell-group :border="false">
          <div class="bindemail-label marg-btm">
            {{ t("update.nameTitle") }}
          </div>
          <van-field
            :border="false"
            class="dev-field"
            v-model="nickName"
            name="nickName"
            :placeholder="t('update.namePlace')"
            :rules="[{ required: true, message: t('update.namePlace') }]"
          />
        </van-cell-group>
      </van-form>
    </div>

    <div class="bindemail-foot">
      <van-button
        type="primary"
        round
        width="244px"
        @click="onSubmit"
        :loading="subLoading"
        >{{ t("update.btn") }}</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "@vue/reactivity";
import { updateUserInfo } from "@/api/user";
import { Toast } from "vant";
import { onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter, useRoute } from "vue-router";
import usePoint from "@/hooks/usePoint.js";
const point = usePoint();
const router = useRouter();
const { t } = useI18n();
let nickName = ref("");
const fromRef = ref(null);
let subLoading = ref(false);
onMounted(() => {
  nickName.value = point.userInfo.nickName;
});
function onClickLeft() {
  router.replace({
      path: "/information",
    });
}
function onSubmit() {
  fromRef.value.validate().then((res) => {
    updateUserInfo({ ...point.userInfo, nickName: nickName.value })
      .then((res) => {
        subLoading.value = false;
        point.updataInfo();
        Toast(t("password.successMsg"));
      })
      .catch((err) => {
        Toast(err);
        subLoading.value = false;
      });
    // router.push({ path: "/information" });
  });
}
</script>

<style lang="less" scoped>
.bindemail {
  &-label {
    line-height: 14px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-top: 13px;
  }
  &-body {
    padding: 0px 16px;
  }
  &-foot {
    margin-top: 41px;
    text-align: center;
    button.van-button.van-button--primary.van-button--normal.van-button--round {
      width: 244px;
    }
  }
  .marg-btm {
    margin-bottom: 8px;
  }
  .margin-top {
    margin-top: 21px;
  }
}
</style>